import { defineComponent, ref, } from "vue";
import { NImage, NTooltip, NIcon, NAvatar, NDropdown, } from "naive-ui"
import { SettingOutlined,FullscreenOutlined, } from "@vicons/antd"
import {Notification} from "@vicons/carbon"
export default defineComponent({
    name: "myheader",
    setup() {
        const avatarimg = ref("http://101.43.194.47:9000/file/4639504002190413825")
        const avataroptions = ref([
            { label: "修改密码", key: "changepwd" },
            { label: "个人设置", key: "persionalsetting" },
            { label: "注销", key: "zhuxiao" },
        ])
        const handleSelect = (key: string | number) => { }
        const settingVnode = () => <NIcon class="h-40px w-40px juzhong1 transform transition-all hover:animate-spin" size="25">
            <SettingOutlined class=" dianji"></SettingOutlined>
        </NIcon>
        const messageVnode = () => <NIcon class="h-40px w-40px juzhong1" size="25">
            <Notification class=" dianji"></Notification>
        </NIcon>
        const screenVnode = () => <NIcon class="h-40px w-40px juzhong1" size="25">
            <FullscreenOutlined class="dianji"></FullscreenOutlined>
        </NIcon>
        return () => (
            <div class="w-full h-40px bg-niluolan flex">
                <div class="flex-1 juzhong1"></div>
                <div class="h-full mx-20px flex items-center">
                    <NTooltip trigger={"hover"} v-slots={{ trigger: screenVnode }}>
                        全屏
                    </NTooltip>
                    <NTooltip trigger={"hover"} v-slots={{ trigger: messageVnode }}>
                        通知
                    </NTooltip>
                    <NDropdown trigger={"hover"} options={avataroptions.value} onSelect={handleSelect}>
                        <NAvatar round class="h-30px w-30px m-5px juzhong1 dianji" src={avatarimg.value}></NAvatar>
                    </NDropdown>
                    <NTooltip trigger={"hover"} v-slots={{ trigger: settingVnode }}>
                        设置
                    </NTooltip>
                </div>
            </div>
        )
    },
})